<template>
  <Card>
    <Form id="searchForm" ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="月份：" prop="date">
        <DatePicker
          v-model="searchForm.date"
          placeholder="请选择月份"
          placement="bottom-start"
          style="width: 200px"
          type="month"
          @on-change="searchForm.date=$event"
        ></DatePicker>
      </Form-item>
      <Form-item label="车辆线路：" prop="line">
        <Select v-model="searchForm.line" clearable placeholder="选择线路" style="width:200px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item label="车牌号：" prop="license_plate_num">
        <Input
          v-model="searchForm.license_plate_num"
          clearable
          placeholder="支持模糊搜索"
          style="width: 200px"
          type="text"
        />
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="getDataList()">搜索</Button>
        <Button @click="handleReset()">重置</Button>
      </Form-item>
    </Form>
    <Row id="generate">
      <Button
        :disabled="exportBtnDisable"
        icon="md-cloud-download"
        style="float: left;margin-top: 2px;"
        type="primary"
        @click="exportEleTaskDalary"
      >导出
      </Button>
      <Button style="float: left;margin-left: 20px;margin-top: 2px;" type="success" @click="saveEvent">保存</Button>
      <Alert v-show="showAlert" style="float: left;margin-left: 20px;" type="error">{{ date_text }}</Alert>
      <Form ref="dataForm" :label-width="90" :model="dataForm" inline>
        <Form-item label="日期范围：" prop="date">
          <DatePicker
            v-model="dataForm.date"
            placeholder="请选择月份"
            placement="bottom-start"
            style="width: 200px"
            type="month"
            @on-change="dataForm.date=$event"
          ></DatePicker>
        </Form-item>
        <Button
          :loading="dataLoading"
          icon="md-search"
          type="primary"
          @click="createData()"
        >生成任务工资数据
        </Button>
      </Form>
    </Row>
    <vxe-table
      id="salaryTable"
      ref="xTable"
      :align="allAlign"
      :data="data"
      :edit-config="{trigger: 'click', mode: 'cell', showStatus: true,activeMethod:activeCellMethod}"
      :height="height"
      :loading="listLoading"
      :remote-sort="true"
      border
      highlight-hover-row
      keep-source
      show-overflow
      size="small"
      @edit-disabled="editDisabledEvent"
      @sort-change="listSort"
    >
      <vxe-table-column field="line" fixed="left" sortable title="线路" width="100"></vxe-table-column>
      <vxe-table-column field="license_plate_num" fixed="left" sortable title="车牌号" width="120"></vxe-table-column>
      <vxe-table-column field="monthly_income" sortable title="月收入(刷卡、投币）" width="120"></vxe-table-column>
      <vxe-table-column field="contract" sortable title="包车收入" width="120"></vxe-table-column>
      <vxe-table-column field="free" sortable title="免票运量" width="120"></vxe-table-column>
      <vxe-table-column field="free_income" sortable title="免票收入" width="120"></vxe-table-column>
      <vxe-table-column field="income_total" sortable title="收入合计" width="120"></vxe-table-column>
      <vxe-table-column field="monthly_km" sortable title="月公里数" width="120"></vxe-table-column>
      <vxe-table-column field="monthly_cost" sortable title="月充电（金额）" width="120"></vxe-table-column>
      <vxe-table-column field="m_ele_total" sortable title="月充电量" width="120"></vxe-table-column>
      <vxe-table-column field="" title="充电量">
        <vxe-table-column field="ele_increment" sortable title="增加额" width="120"></vxe-table-column>
        <vxe-table-column field="ele_rate" sortable title="增加率" width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="ele_grade_one"
          sortable
          title="增减百分比在（+－1%含）之间，奖励40分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="ele_grade_two"
          sortable
          title="节约或超过1%至3%（含）之间，奖励或扣减10分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="ele_grade_three"
          sortable
          title="如节约或超过3%，奖励或扣减20分"
          width="120"></vxe-table-column>
      </vxe-table-column>
      <vxe-table-column field="" title="收入">
        <vxe-table-column field="income_increment" sortable title="增加额" width="120"></vxe-table-column>
        <vxe-table-column field="income_rate" sortable title="增加率" width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="income_grade_one"
          sortable
          title="增减百分比在（+－1%含）之间，奖励40分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="income_grade_two"
          sortable
          title="节约或超过1%至3%（含）之间，奖励或扣减10分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="income_grade_three"
          sortable
          title="如节约或超过3%，奖励或扣减20分"
          width="120"></vxe-table-column>
      </vxe-table-column>
      <vxe-table-column field="" title="交通事故">
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="traffic_grade_one"
          sortable
          title="交通事故（次责及以上）单位：起"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="traffic_grade_two"
          sortable
          title="标准分值 15分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="traffic_grade_three"
          sortable
          title="次责及以上交通事故，每起扣减5分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="traffic_grade_four"
          sortable
          title="全责致人重伤或死亡的交通事故扣减全部15分"
          width="120"></vxe-table-column>
      </vxe-table-column>
      <vxe-table-column field="" title="公里数">
        <vxe-table-column field="mileage_increment" sortable title="增加额" width="120"></vxe-table-column>
        <vxe-table-column field="mileage_rate" sortable title="增加率" width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="mileage_grade_one"
          sortable
          title="增减百分比在（+－1%含）之间，奖励5分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="mileage_grade_two"
          sortable
          title="节约或超过1%至3%（含）之间，奖励或扣减2分"
          width="120"></vxe-table-column>
        <vxe-table-column
          :edit-render="{name: 'input'}"
          field="mileage_grade_three"
          sortable
          title="如节约或超过3%，奖励或扣减3分"
          width="120"></vxe-table-column>
      </vxe-table-column>
      <vxe-table-column field="total_grade" sortable title="分数合计" width="120"></vxe-table-column>
      <vxe-table-column field="ranking" sortable title="排名" width="120"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: 'input'}"
        field="reward_punish"
        sortable
        title="奖惩金额"
        width="120"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: 'input'}"
        field="remark"
        sortable
        title="备注"
        width="120"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: '$select', options: sexList}"
        field="is_check"
        sortable
        title="是否纳入考核"
        width="120"></vxe-table-column>
    </vxe-table>
  </Card>
</template>
<script>
import {editEleTaskDalarys, eleTaskDalary, eleTaskDalaryList, sortEleTaskDalary} from '../../api/eleTaskSalary'

export default {
  data() {
    return {
      showAlert: false,
      total: 0,
      showModal: false,
      dataLoading: false,
      listLoading: false,
      sortLoading: false,
      exportBtnDisable: true,
      height: '450',
      searchForm: {
        line: '-1',
        license_plate_num: '',
        sort: '',
        order_sort: '',
      },
      activeIndex: '',
      dataForm: {
        date: ''
      },
      editIsCheck: null,
      data: [],
      lines: [],
      date_text: '',
      sexList: [
        {value: '1', label: '是'},
        {value: '0', label: '否'}
      ],
      allAlign: 'center'
    }
  },
  watch: {
    // $route: 'getDataList'
  },
  created() {
    this.getLinesArray()
  },
  mounted() {
    this.init()
    const body_h = document.body.clientHeight
    const form_h = document.getElementById('searchForm').offsetHeight
    const row_h = document.getElementById('generate').offsetHeight
    this.height = body_h - form_h - row_h - 200
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    cancel() {
      this.showModal = false
    },
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getDataList()
    },
    createData() {
      if (!this.dataForm.date) {
        this.$Message.error('请选择生成任务工资的日期')
        return
      }
      eleTaskDalaryList(this.dataForm).then(res => {
        if (res.data.result.length === 0) {
          this.dataLoading = true
          eleTaskDalary(this.dataForm).then(res => {
            this.dataLoading = false
            if (res.data) {
              this.$Message.success('任务工资已生成')
              this.getDataList()
            } else {
              this.$Message.error(res.message)
            }
          })
        } else {
          this.$Modal.confirm({
            title: '已生成数据，确认重新生成？',
            loading: true,
            content: '已生成数据，确认重新生成？',
            onOk: () => {
              this.$Modal.remove()
              this.dataLoading = true
              eleTaskDalary(this.dataForm).then(res => {
                this.dataLoading = false
                if (res.data) {
                  this.$Message.success('任务工资已生成')
                  this.getDataList()
                } else {
                  this.$Message.error(res.message)
                }
              })
            }
          })
        }
      })
    },
    edit(row) {
      this.$router.push({
        name: 'editEleSalaryAccounting',
        params: {
          id: row.id
        }
      })
    },
    //导出
    exportEleTaskDalary() {
      const line = this.searchForm.line
      const license_plate_num = this.searchForm.license_plate_num
      const date = this.searchForm.date

      window.location.href =
        '/api/exportEleTaskDalary?line=' +
        line +
        '&license_plate_num=' +
        license_plate_num +
        '&date=' +
        date
    },
    getDataList() {
      this.listLoading = true
      eleTaskDalaryList(this.searchForm).then(res => {
        this.listLoading = false
        this.data = res.data.result
        this.searchForm.date = res.data.date
        if (
          this.searchForm.line ||
          this.searchForm.license_plate_num ||
          this.searchForm.date
        ) {
          this.exportBtnDisable = false
        }

        const month = new Date(this.searchForm.date)
        const year = month.getFullYear()
        let start_month =
          month.getMonth() > 9 ? month.getMonth() : '0' + month.getMonth()
        const end_month =
          month.getMonth() + 1 > 9
            ? month.getMonth() + 1
            : '0' + (month.getMonth() + 1)
        let start_year = month.getFullYear()
        if (start_month == '00') {
          start_year = year - 1
          start_month = 12
        }
        const start_time = start_year + '-' + start_month + '-26'
        const end_time = year + '-' + end_month + '-25'
        this.date_text = '搜索时间为：' + start_time + '到' + end_time
        this.showAlert = true
      })
    },
    handleReset() {
      this.searchForm = {
        line: '-1',
        license_plate_num: '',
        sort: '',
        order_sort: '',
      }
      this.getDataList()
    },
    init() {
      this.getDataList()
    },
    ok() {
      this.data1[this.activeIndex] = this.form
    },
    sortData() {
      if (!this.dataForm.date) {
        this.$Message.error('请选择日期排序')
        return
      }
      this.sortLoading = true
      sortEleTaskDalary(this.dataForm).then(res => {
        this.sortLoading = false
        if (res.data) {
          this.$Message.success('任务工资已排名')
          this.getDataList()
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    saveEvent() {
      const updateRecords = this.$refs.xTable.getUpdateRecords()
      if (updateRecords.length === 0) {
        this.$message.info('未编辑数据')
      } else {
        editEleTaskDalarys(updateRecords).then(res => {
          if (res.data.result) {
            this.$Message.success(res.message)
            this.getDataList()
          } else {
            this.$Message.error(res.message)
          }
        })
      }
    },
    activeCellMethod({row, rowIndex}) {
      if (row.id === null) {
        return false
      }
      // if(row.is_check===0){
      //   return false
      // }
      return true
    },
    editDisabledEvent({row, column}) {
      // if(row.is_check===0){
      //   this.$XModal.alert('不纳入考核车辆，禁止编辑');
      // }else{
      this.$XModal.alert('禁止编辑')
      // }
    },
    listSort(v) {
      this.searchForm.sort = v.field
      this.searchForm.sort_order = v.order
      this.getDataList()
    }
  }
}
</script>
<style src="./salaryAccounting.css"></style>
